// dialog-service.ts
import { createApp, h } from 'vue'
import TipDialog from './TipDialog.vue'

export function showTipDialog(options: {
  title: string
  content?: string
  fix?: boolean
}): Promise<boolean> {
  return new Promise((resolve) => {
    const container = document.createElement('div')
    document.body.appendChild(container)

    // 提前定义 destroyDialog 函数
    const destroyDialog = () => {
      app.unmount()
      container.remove()
    }

    const app = createApp({
      render() {
        return h(TipDialog, {
          title: options.title,
          content: options.content,
          //在 Vue 3 中，自定义事件名会自动转换为 kebab-case（短横线连接），而你在组件中声明的是camelCase（驼峰命名）的onClickCallBack，
          // 但在父组件中需要使用对应的kebab-case名称on-on-click-call-back才能正确监听。
          onClickCallback: (type: number) => {
            resolve(type === 1) // true为确定，false为取消
            destroyDialog() // 正确调用销毁函数
          },
        })
      },
    })
    // 现在可以安全地挂载应用
    app.mount(container)
  })
}
